function headerBackgroundWidth() {
  var headerWidth = $(".header").outerWidth();
  $(".header-background").css({
    width: headerWidth + "px",
  });
}

headerBackgroundWidth();

function headerRoll() {
  var windowRollSize = $(window).scrollTop();
  scrollScale = windowRollSize / 4;
  scrollInt = Math.round(scrollScale);
  backgrounOpacity = scrollInt / 100;
  if (windowRollSize > 400) {
    $(".header-background").css({
      opacity: 1,
    });
  } else if (windowRollSize <= 400) {
    $(".header-background").css({
      opacity: backgrounOpacity,
    });
  }
  // console.log(backgrounOpacity);
}

$(window).scroll(function () {
  headerRoll();
});

function stepBackgroundPosition() {
  var stepHeight = $(".step-content-pallet").outerHeight();
  stepBackgroundHeight = stepHeight / 2;
  $(".step-background").css({
    height: stepBackgroundHeight + "px",
  });
}

$(".solution-mask").hover(
  function () {
    var textHeight = $(this).find("#solution-text-height").outerHeight();
    windowSize = $(window).outerWidth();
    if (windowSize > 768) {
      $(this)
        .find(".solution-content")
        .css({
          height: textHeight + "px",
        });
    }
  },
  function () {
    windowSize = $(window).outerWidth();
    if (windowSize > 768) {
      $(this)
        .find(".solution-content")
        .css({
          height: 0 + "px",
        });
    }
  }
);

stepBackgroundPosition();

$(window).resize(function () {
  headerBackgroundWidth();
  stepBackgroundPosition();
});


$(".switch").on("click", function(){
  $(".main-mask").css({
    visibility: "visible",
    opacity: 1
  })
  $(".header-link-box").css({
    visibility: "visible",
    opacity: 1
  })
  $(".header-background").css({
    opacity: 1 ,
    width: '100vw'
  })
  $('body').css({
    overflow: 'hidden'
  })
  $(".switch").css({
    background: 'rgba(28,183, 162, 1)'
  })
})

$(".main-mask").on("click", function(){
  $(".main-mask").css({
    visibility: "hidden",
    opacity: 0
  })
  $(".header-link-box").css({
    visibility: "hidden",
    opacity: 0
  })
  $(".header-background").css({
    width: '100%'
  })
  headerRoll();
  $('body').css({
    overflow: 'auto'
  })
  $(".switch").css({
    background: 'rgba(28,183, 162, 0)'
  })
})